import React, { useState, useEffect } from 'react'
import { Card, Button, Form, Input, InputNumber, Cascader, message } from "antd"
import { Link, useLocation } from "react-router-dom"
import { findCascadeData } from "@/apis/category"
import MyUpload from '../../components/MyUpload'
import { addProduct } from "@/apis/goods"
import {findProductById} from "@/apis/goods"


export default function ProductUpdate() {
    const [options, setOptions] = useState([])
    const [typeId, setTypeId] = useState("")
    const [uploadUrl, setUploadUrl] = useState("")
    const [messageApi, contextHolder] = message.useMessage();
    const [product, setProduct] = useState({})
    const location = useLocation()
    const [form] = Form.useForm()
    useEffect(() => {
        //获取分类数据
        fetchData()
        //查询我们的商品详情
        fetchData2(location.state.id)
    }, [])
    
    useEffect(()=>{
        form.setFieldsValue({...product,type:["数码产品","手机"]})
    },[product])

    const fetchData = async () => {
        const res = await findCascadeData({ parentId: 0 })
        console.log(res);
        setOptions(res.data.data)
    }
    const fetchData2 = async (id) => {
        const res = await findProductById({ id })
        console.log(res);
        setProduct(res.data.data)
    }
    const onFinish = async (values) => {
        values.type = typeId
        //http://127.0.0.1:8080/wechart-124y72728.jpg
        values.imgSrc = uploadUrl
        console.log('Success:', values);
        const res = await addProduct(values)
        console.log(res);
        if (res.code == 1) {
            messageApi.success("添加成功")
            //添加
        } else {
            messageApi.error("添加失败")
        }
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const typeChange = (value, value2) => {
        console.log(value, value2);
        const typeId = value2[1].id
        setTypeId(typeId)
    }
    const getUploadElementPath = (value) => {
        setUploadUrl(value)
    }
    return (
        <Card
            title=" 添加商品"
            extra={<Link to="/home/list">返回</Link>}
            style={{
                width: "100%",
            }}>
            <Form
                name="basic"
                form={form}
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    maxWidth: 800,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="商品名字"
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: '用户名不能为空',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="商品描述"
                    name="title"
                    rules={[
                        {
                            required: true,
                            message: '商品描述不能为空',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="商品价格"
                    name="price"
                    rules={[
                        {
                            required: true,
                            message: '商品价格不能为空',
                        },
                    ]}
                >
                    <InputNumber />
                </Form.Item>
                <Form.Item
                    label="商品类型"
                    name="type"
                >
                    <Cascader options={options} onChange={typeChange} placeholder="请选中分类" />
                </Form.Item>
                <Form.Item
                    label="商品图片"
                    name="imgSrc"
                >
                    <MyUpload imgPath={`http://127.0.0.1:8002/images/goods/`+product.imgSrc} action="http://127.0.0.1:8002/goods/fileUpload" fileName="imgSrc" getUploadElementPath={getUploadElementPath}></MyUpload>
                </Form.Item>
                <Form.Item
                    label="商品详情"
                    name="msg"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    )
}

